<template>
	<view class="home">
	<search></search>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in swiperList" :key='item.goods_id'>
				<view class="swiper-item">
					<image mode="widthFix" :src="item.image_src" @click='previewImage(index)'></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="home_tab">
			<view v-for="(item,index) in catitems" :key='index'>
				<image :src="item.image_src" mode="widthFix"></image>
			</view>
		</view>
		<view class="home_floor" v-for="(item,index) in floorList" :key='index'>
			<view class="floor_top">
				<image class="floor_top_img" mode="widthFix" :src="item.floor_title.image_src"></image>
			</view>
			<view class="floor_but">
				<view class="floor_item" v-for="(v,i) in item.product_list" :key='i'>
					<image class="floor_but_img" :src="v.image_src"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import search from '@/components/search/index.vue'
	export default {
		data() {
			return {
				swiperList: [],
				swiperUrlList: [],
				catitems: [],
				floorList: [],
				searchValue: ''
			}
		},
		components:{
			search
		},
		onLoad() {
			uni.showLoading({
				title: '加载中',
			})
			Promise.all([this.getSwiper(),
				this.getCatitems(),
				this.getFloordata()
			]).then((res) => {
				uni.hideLoading()
			})
		},
		methods: {
			async getSwiper() {
				try {
					await this.$store.dispatch('getSwiper')
					this.swiperList = this.$store.state.common.swiperList
					this.swiperList.forEach((item) => {
						this.swiperUrlList.push(item.image_src)
					})
				} catch (e) {
					console.log(e)
				}
			},
			previewImage(index) {
				uni.previewImage({
					current: index, // 当前显示图片的http链接
					urls: this.swiperUrlList // 需要预览的图片http链接列表
				})
			},
			async getCatitems() {
				await this.$store.dispatch('getCatitems')
				this.catitems = this.$store.state.common.catitems
			},
			async getFloordata() {
				let res = await this.$store.dispatch('getFloordata')
				this.floorList = res.data.message
			}
		}
	}
</script>

<style scoped>
	swiper {
		width: 750rpx;
		height: 340rpx;
	}

	swiper image {
		width: 100%;
	}

	.home_tab {
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		overflow: hidden;
	}

	.home_tab image {
		width: 180rpx;
		height: 180rpx;
	}

	.home_floor {
		width: 100%;
		margin-top: 40rpx;
	}

	.floor_top {
		width: 100%;
		height: 80rpx;
	}

	.floor_but {
		display: grid;
		grid-template-columns: repeat(4, 25%);
		grid-template-rows: 200rpx 200rpx;
		overflow: hidden;
	}

	.floor_item {
		padding: 10rpx 10rpx;
	}

	.floor_item:nth-child(1) {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}

	.floor_item image {
		width: 100%;
		height: 100%;
	}
</style>
